<!--
 * @Descripttion: 批次管理-详情
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-12
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-04-12
-->
<template>
  <div class="ssc-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="码值">
            <a-input v-model:value="searchParam.codeValue" placeholder="码值" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="起始值">
            <a-input-number style="width: 100%" placeholder="请输入起始值" @change="verification" v-model:value="searchParam.codeStart" :precision="0" :min="1" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="结束值">
            <a-input-number style="width: 100%" placeholder="请输入结束值" @change="verification" v-model:value="searchParam.codeEnd" :precision="0" :min="1" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button :disabled="searchParam.codeStart && searchParam.codeEnd && searchParam.codeEnd < searchParam.codeStart" class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <a-button danger :disabled="!state.selectedRowKeys.length" type="primary" @click="cancelBatchCode">
          <template #icon><delete-outlined :style="{ 'font-weight': 'bold' }" /></template>
          批量作废
        </a-button>
      </div>
      <a-table rowKey="codeId" :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            {{ record.status === 2 ? '作废' : '正常' }}
          </template>
          <template v-if="column.key === 'cancelTime'">
            {{ record.cancelTime || '--' }}
          </template>
          <template v-if="column.key === 'cancelByName'">
            {{ record.cancelByName || '--' }}
          </template>
          <template v-if="column.key === 'action'">
            <span>
              <a-popconfirm v-if="record.status !== 2" title="确定作废此码?" @confirm="cancelCode(record.codeId)">
                <a class="color-error">作废</a>
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { DeleteOutlined } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'
  import { onMounted, reactive } from 'vue'
  import { useRoute } from 'vue-router'

  import { requestCancelBatchCode, requestCancelCode, requestGetDetailBatchList } from '/@/api/business/tracecode/codeInfo'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  const route = useRoute()
  const { batchId } = route.query

  /** 搜索条件 */
  const searchParam = reactive<GetCodeDetailsTypes.IRequest>({
    codeValue: null,
    codeStart: null,
    codeEnd: null,
    batchId,
  })

  const state = reactive({
    selectedRowKeys: [],
    loading: false,
  })

  /** 表格列配置 */
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      customRender: (row) => `${row.index + 1}`,
    },
    { title: '码值', dataIndex: 'codeValue', key: 'codeValue' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '作废时间', dataIndex: 'cancelTime', key: 'cancelTime' },
    { title: '操作人', dataIndex: 'cancelByName', key: 'cancelByName' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetCodeDetailsTypes.IRequest, GetCodeDetailsTypes.IResponse[]>(searchParam, requestGetDetailBatchList)

  onMounted(() => {
    queryList()
  })

  /**
   * 重置
   */
  const clear = () => {
    searchParam.codeValue = null
    searchParam.codeStart = null
    searchParam.codeEnd = null
    search()
  }
  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 作废
   */
  const cancelCode = async (codeId) => {
    const { responseCode } = await requestCancelCode({ codeId })
    if (responseCode === HttpCodeEnum.SUCCESS) queryList()
  }

  /**
   * 批量作废
   */
  const cancelBatchCode = async () => {
    const { responseCode } = await requestCancelBatchCode({ codeIds: [...state.selectedRowKeys] })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      queryList()
      state.selectedRowKeys = []
    }
  }

  /**
   * 数值限定
   */
  const verification = () => {
    if (searchParam.codeStart && searchParam.codeEnd && searchParam.codeStart > searchParam.codeEnd) message.warning('起始值不得大于结束值，请修改')
  }

  const onSelectChange = (selectedRowKeys) => {
    state.selectedRowKeys = selectedRowKeys
  }
</script>

<style lang="less" scoped>
  .color-error {
    color: @error-color;
  }
</style>
